<script setup>
import { ref } from "vue";
import useUserInfoStore from "../../stores/userInfo.js";
import { resetPasswordService } from "@/server/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const userInfoStore = useUserInfoStore();
const router = useRouter();

const rePasswordData = ref({
  username: userInfoStore.info,
  org_password: "",
  password1: "",
  password2: "",
});

const isPassword = () => {
  return rePasswordData.value.password1 === rePasswordData.value.password2;
};

const validatePassword = (value) => {
  // 定义正则表达式检查密码特性
  const hasUpperCase = /[A-Z]/.test(value);
  const hasLowerCase = /[a-z]/.test(value);
  const hasDigit = /\d/.test(value);
  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(value);

  const types = [hasUpperCase, hasLowerCase, hasDigit, hasSpecialChar].filter(
    Boolean
  ).length;

  if (types < 1) {
    return "密码必须包含大小写字母、数字和特殊符号中的至少两种";
  }

  return "";
};

const rePassword = async () => {
  if (!isPassword()) {
    ElMessage.error("密码不一致");
    return;
  }
  const validationMessage = validatePassword(rePasswordData.value.password);
  if (validationMessage) {
    ElMessage.error(validationMessage);
    return;
  }
  try {
    await resetPasswordService(rePasswordData.value);
    userInfoStore.removeInfo();
    await router.push("/");
    ElMessage.success("修改成功");
  } catch (error) {
    ElMessage.error("密码重置失败");
  }
};

const rules = {
  org_password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      required: true,
      message: "请输入密码",
      trigger: "focus",
    },
  ],
  password1: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      required: true,
      message: "请输入密码",
      trigger: "focus",
    },
  ],
  password2: [
    {
      required: true,
      message: "再次输入密码",
      trigger: "blur",
    },
    {
      required: true,
      message: "再次输入密码",
      trigger: "focus",
    },
    {
      validator: (rule, value, callback) => {
        if (!isPassword()) {
          callback(new Error("密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        if (!isPassword()) {
          callback(new Error("密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "focus",
    },
  ],
};
</script>

<template>
  <header>
    <h1>修改密码</h1>
  </header>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    "
  >
    <el-card class="reset-password-container">
      <el-card class="item-div">
        <el-form
          :model="rePasswordData"
          :rules="rules"
          label-width="150px"
          class="reset-password-form"
        >
          <el-form-item
            label="请输入原始密码:"
            prop="org_password"
            class="item"
            size="large"
          >
            <el-input
              v-model="rePasswordData.org_password"
              show-password
              class="input-field"
            />
          </el-form-item>
          <el-form-item
            label="请输入新密码:"
            prop="password1"
            class="item"
            size="large"
          >
            <el-input
              v-model="rePasswordData.password1"
              show-password
              class="input-field"
            />
          </el-form-item>
          <el-form-item
            label="请再次确认新密码:"
            prop="password2"
            class="item"
            size="large"
          >
            <el-input
              v-model="rePasswordData.password2"
              show-password
              class="input-field"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="rePassword"
              size="large"
            >重置密码</el-button
            >
          </el-form-item>
        </el-form>

      </el-card>
    </el-card>
  </div>
</template>

<style scoped>
.item-div {
  width: 90%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* background-image: linear-gradient(160deg, #ffffff, #ffffff, #aa0000); */
  box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

.item {
  font-size: 30px;
}

.reset-password-container {
  width: 40%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  /* background-image: linear-gradient(to bottom right, #aa0000, #ffffff, #ffffff); */
  box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.1);
}

.reset-password-form {
  width: 90%;
  max-width: 500px;
  /* 设置最大宽度 */
}

.input-field {
  font-size: 20px;
  width: 100%;
  /* 输入框宽度 */
  height: 50px;
}

.reset-password-btn {
  font-size: 20px;
  margin-top: 20px;
  /* 按钮顶部间距 */
  height: 50px;
  width: 200px;
}
</style>
